<template>
	<view class="content">
		<z-paging ref="paging" :refresher-enabled="pageParam.refresherEnabled" :loading-more-enabled="ShowLoadingmore"
			v-model="ListData" @query="GetPageData">
			<template #top>
				<u-navbar :fixed="false" :title="pageParam.type +'筛选'" :autoBack="true" :safeAreaInsetTop="true"
					leftIconColor="#fff">
				</u-navbar>

				<view class="SearchBox" v-if="showSearch">
					<u-search :showAction="true" v-model="searchValue" @search="GetSearchList" @custom="SearchOrAdd"
						@clear="GetSearchList" shape="square" :actionText="AllowAddEdit ? '+' :'查询'"
						:actionStyle="{color:'#fff',fontSize: AllowAddEdit ? '40px' : '16px'}"
						:animation="false"></u-search>
				</view>
			</template>


			<view class="MainBox">

				<u-cell v-for="(item, index) in ListData" :key="index" :title="item[pageParam.serverSearch.showText]"
					size="large" :clickable="true" @click="ChoiceCell(item)">
					<template #label>
						<view
							v-if="pageParam && pageParam.serverSearch.subText && pageParam.serverSearch.subText.length">

							<view v-for="DecsItem in pageParam.serverSearch.subText">
								<view v-if="item[DecsItem.labelKey]"
									style="font-size: 14px;color: #999;margin-top: 4px;">
									{{DecsItem.label}} {{item[DecsItem.labelKey]}}
								</view>
							</view>
						</view>
					</template>

					<template #value>
						<view v-if="item.checked">
							<u-icon size="30" name="checkbox-mark" color="#12ce04"></u-icon>

						</view>
					</template>
				</u-cell>

				<u-loadmore v-if="!ShowLoadingmore" status="nomore" fontSize="24" />
			</view>

		</z-paging>

	</view>
</template>

<script>
	/* 新建工单 */
	export default {
		data() {
			return {
				ShowLoadingmore: true,
				IsLocalData: false, // 判断是否为本地数据
				showSearch: false,
				SearchKey: 'SearchKey', // 接口请求关键字
				listAllData: [], // 测试列表总数据
				searchValue: '', // 搜索框数据
				ListData: [], // 列表数据
				status: 'loadmore',
				page: {
					pageIndex: 1, // 页码
					pageSize: 30, // 每页数量 
				},
				pageParam: {}, // 页面传递的参数

				AllowAddEdit: false, // 是否允许新增编辑
			}
		},
		created() {
			var that = this;
		},
		onHide() {
			// 关闭页面时，清除vuex中的参数数据
			this.$store.commit('ChangeAndSetStateData', {
				Name1: 'BaseScreenParm',
				data: {}
			})
		},
		onShow() {},
		onLoad(option) {
			let that = this;
			// 记录传递的参数，
			this.pageParam = this.$store.state.BaseScreenParm;
			// console.log(this.pageParam)
			this.pageParam = this.$store.state.BaseScreenParm;
			// 判断是否存在下拉刷新属性，控制是否开启下拉刷新
			if (!this.pageParam.hasOwnProperty('refresherEnabled')) {
				this.pageParam.refresherEnabled = true;
			}

			if (!this.$utils.isEmpty(this.pageParam)) {
				// 判断是否传入搜索参数字符
				if (this.pageParam.serverSearch.hasOwnProperty('searchKey')) {
					this.SearchKey = this.pageParam.serverSearch.searchKey;
					this.showSearch = true;
				}

				// console.log(this.pageParam.hasOwnProperty('IsAllowAddEdit'))
				// 判断是否允许新增编辑
				if (this.pageParam.hasOwnProperty('IsAllowAddEdit')) {
					// 允许编辑
					this.AllowAddEdit = true;
				}

				// 判断是否有值传入，有传入的，则是本地数据
				if (option && option.select) {
					// 设置为本地数据
					that.IsLocalData = true;

					// 存储本地总数据，用于搜索
					this.ListData = JSON.parse(JSON.stringify(that.pageParam.param.data));
					that.listAllData = JSON.parse(JSON.stringify(that.pageParam.param.data));
				}
			}


		},
		computed: {},
		mounted() {
			let that = this;
			uni.$on('Refresh_BaseScreen', function(ret) {
				that.$nextTick(() => {
					that.$refs.paging.reload();
				})
			})
		},
		onUnload() {
			uni.$off('Refresh_BaseScreen')
		},
		methods: {
			SearchOrAdd() { // 点击搜索框右侧控件 搜索 / 新增
				// 如果是允许新增
				if (this.AllowAddEdit) {
					let Name = this.pageParam.IsAllowAddEdit;
					let url = '';

					if (Name == '作业员') {
						url = 'operator_AddorEdit'
					}

					uni.navigateTo({
						url: '/AddBaseData/' + url + '?Type=add'
					})
				} else {
					this.GetSearchList();
				}
			},
			GetPageData(pageNo) { // 获取页面数据
				let that = this;

				if (this.$utils.isEmpty(this.pageParam)) {
					that.$refs.paging.complete(false);
					return this.$utils.hideLoading();
				};


				// console.log(this.$refs.paging.pageNo)
				// 开启加载
				this.$utils.showLoading();
				// 判断是否为本地数据
				if (this.IsLocalData) {
					// 是本地数据
					let ListData = JSON.parse(JSON.stringify(this.ListData));
					// 选中
					if (that.pageParam.serverSearch.ChoiceDataKey) {
						for (let [index, item] of ListData.entries()) {
							if (item[that.pageParam.serverSearch.ChoiceDataKey] == that.pageParam.serverSearch
								.ChoiceDataData) {
								item['checked'] = true;
								break;
							}
						}
					}
					that.$refs.paging.complete(ListData);
					this.$utils.hideLoading()
					return
				} else {
					// 非本地数据，需要请求接口

					let param = {};
					// 判断是否分页
					if (that.pageParam.serverSearch.isPaging) {
						param = JSON.parse(JSON.stringify(that.pageParam.param));

						// 如果有传入搜索的字段名
						if (that.pageParam.serverSearch.hasOwnProperty('searchKey')) {
							// 给页面搜索关键字赋值
							param[that.SearchKey] = that.searchValue;
						}

						// 使用了下拉组件，所以index的值需要使用方法带入的
						param[that.pageParam.serverSearch.pageIndexStr] = pageNo;


					} else {
						// 不分页拿取传入的参数信息
						param = JSON.parse(JSON.stringify(that.pageParam.param));
					}

					that.Request.request(that.pageParam.cmd, param, function(ret) {
						// console.log(JSON.stringify(ret))
						if (ret.data.ds.length && ret.data.ds[0]?.status == 500) {
							// that.status = 'nomore';
							that.$refs.paging.complete(false);
							that.$utils.hideLoading()

							return uni.showToast({
								title: ret.data.ds[0].msg,
								icon: 'none',
								duration: 2000
							})
						} else {
							// 是否分页
							if (that.pageParam.serverSearch.isPaging) {

								that.Total = ret.data.ds1[0]['Total'];

								if (ret.data.ds1[0]['Total'] == 0) {
									// that.status = 'nomore';
									that.$refs.paging.complete();
									that.$utils.hideLoading()
									return
								}

								// that.ListData.push(...ret.data.ds);
								// 判断是否有选中过，选中过则设为true
								if (that.pageParam.serverSearch.ChoiceDataKey) {
									for (let [index, item] of ret.data.ds.entries()) {
										if (item[that.pageParam.serverSearch.ChoiceDataKey] == that.pageParam
											.serverSearch.ChoiceDataData) {
											item['checked'] = true;
											break;
										}
									}
								}
								that.$refs.paging.complete(ret.data.ds);
								that.$utils.hideLoading()

								// that.pageParam.param[that.pageParam.serverSearch.pageIndexStr] += 1;
								// that.page.pageIndex = ++that.page.pageIndex;

								// setTimeout(() => {
								// 	if (ret.data.ds.length <= that.Total) {
								// 		that.$refs.paging.complete([]);
								// 	}
								// }, 800)

								// that.status = 'loadmore';
								// if (that.ListData.length == that.Total) {
								// 	that.$refs.paging.complete();
								// 	// 	that.status = 'nomore';
								// }
							} else {

								that.ShowLoadingmore = false;
								let TheData = JSON.parse(JSON.stringify(ret.data.ds))
								if (that.pageParam.serverSearch.ChoiceDataKey) {
									for (let [index, item] of TheData.entries()) {
										if (item[that.pageParam.serverSearch.ChoiceDataKey] == that.pageParam
											.serverSearch.ChoiceDataData) {
											item['checked'] = true;
											break;
										}
									}
								}

								// that.ListData = TheData;
								that.$refs.paging.complete(TheData);
								that.$utils.hideLoading();
								setTimeout(() => {
									that.$refs.paging.endRefresh()
								}, 100)

								// that.status = 'nomore';
							}

						}
					}, function(err) {
						console.log(JSON.stringify(err))
						that.$refs.paging.complete(false);
						that.$utils.hideLoading()
					});

				}
			},
			GetSearchList() { // 搜索
				let that = this;
				// 判断是否为本地数据，如果不是，则刷新，如果是则从listAllData中提取数据

				if (this.IsLocalData) { // 本地数据
					let filterData = [];

					// 如果搜索是空，则返回全部
					if (that.$utils.isEmpty(that.searchValue)) {
						filterData = JSON.parse(JSON.stringify(that.listAllData))
					} else {
						filterData = that.listAllData.filter(item => {
							return item[that.SearchKey].includes(that.searchValue)
						})
					}

					// 判断是否有选中过，选中过则设为true
					if (that.pageParam.serverSearch.ChoiceDataKey) {
						for (let [index, item] of filterData.entries()) {
							if (item[that.pageParam.serverSearch.ChoiceDataKey] == that.pageParam
								.serverSearch.ChoiceDataData) {
								item['checked'] = true;
								break;
							}
						}
					}

					that.$refs.paging.complete(filterData);
					// that.$utils.hideLoading();

				} else {
					that.$refs.paging.reload();
				}
			},
			ChoiceCell(data) { // 选中单元格
				var that = this;
				// console.log(that.pageParam)

				uni.$emit(this.pageParam.ListeningName, {
					type: that.pageParam.type,
					msg: '',
					data: data
				});

				uni.navigateBack();

			},
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f9f9f9;

		.SearchBox {
			background-color: #fff;
			background-color: #51d0d0;
			padding: 6px 10px;
		}

		.MainBox {
			flex: 1;
			overflow: auto;
		}
	}
</style>